<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/index.css" type="text/css">
	<script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script>
	<script src="js/mf-pattern/mF_fancy.js" type="text/javascript"></script>
	<link rel="stylesheet" href="js/mf-pattern/mF_fancy.css" type="text/css">
	<script type="text/javascript">
		myFocus.set({
			id:'picBox'
		})
	</script>
	<title>Document</title>
</head>
<body>
	<div class="nav">
		<div><img src="img/logo.jpg" alt=""></div>
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">产品特色</a></li>
			<li><a href="#">解决方案</a></li>
			<li><a href="#">产品价格</a></li>
			<li><a href="#">帮助中心</a></li>
			<li><a href="#">关于我们</a></li>
		</ul>
	</div><!-- 导航结束 -->
	<div class="wrap">
		<div class="ad" id="picBox">
			<div class="loading
			"><img src="img/loading.gif" alt="图片加载中"></div>
			<div class="pic">
				<ul>
					<li><img src="img/ad2.jpg" alt=""></li>
					<li><img src="img/ad3.jpg" alt=""></li>
					<li><img src="img/ad4.jpg" alt=""></li>
				</ul>
			</div>
		</div><!-- 轮播图结束 -->
		<div class="scroll_news">
			<h2 class="scroll_news_title">滚动新闻</h2>
			<div class="scroll_news_content"><p>这是滚动新闻</p></div>
		</div><!-- 滚动新闻结束 -->
		<div class="case_show">
			<div class="left_show"><a href="#"><img src="img/bs.jpg" alt=""><p>玩转bootstrap</p></a></div>
			<div class="mid_show"><a href="#"><img src="img/css.jpg" alt=""><p>企业网站案例</p></a></div>
			<div class="right_show"><a href="#"><img src="img/js.jpg" alt=""><p>javascript基础</p></a></div>
		</div><!-- 课程展示结束 -->
		<div class="mainBox">
			<div class="news">
				<div class="title">
					<h2><a href="#">新闻中心</a></h2>
				</div>
				<div class="news_list">
					<ul>
						<li>
							<div class="news_date"><p>8月23日</p></div>
                        	<div class="news_content">
	                            <h3><a href="#">学习计划之"前端攻城狮初养成"</a></h3>
	                            <p><a href="#">想成为前端攻城狮?想开发一款专属App?想不想成为一个逗逼程序猿？没有任何基础的你,应该从何学起?</a></p>
                        	</div>
						</li>
						<li><div class="news_date"><p>8月23日</p></div>
                        	<div class="news_content">
	                            <h3><a href="#">学习计划之"前端攻城狮初养成"</a></h3>
	                            <p><a href="#">想成为前端攻城狮?想开发一款专属App?想不想成为一个逗逼程序猿？没有任何基础的你,应该从何学起?</a></p>
                        	</div>
                        </li>
						<li>
							<div class="news_date"><p>8月23日</p></div>
                        	<div class="news_content">
	                            <h3><a href="#">学习计划之"前端攻城狮初养成"</a></h3>
	                            <p><a href="#">想成为前端攻城狮?想开发一款专属App?想不想成为一个逗逼程序猿？没有任何基础的你,应该从何学起?</a></p>
                        	</div>
						</li>
					</ul>
				</div>
			</div><!-- 新闻列表结束 -->
			<div class="hot">
				<div class="title">
					<h2><a href="#">热门活动</a></h2>
				</div>
				<div class="activity">
					<img src="img/2048.jpg" alt="">
					<ul>
                    <li><a href="#">慕课网2048源码征集</a> </li>
                    <li><a href="#">慕课网2048源码征集</a> </li>
                    <li><a href="#">慕课网2048源码征集</a> </li>
                    <li><a href="#">慕课网2048源码征集</a> </li>
                    <li><a href="#">慕课网2048源码征集</a> </li>
                </ul>
				</div>
			</div><!-- 热门活动结束 -->
			<div class="contact">
				<div class="title">
					<h2><a href="#">联系我们</a></h2>
				</div>
				<div class="contact_info">
					<p>讲师招募<br>
                    JiangYun<br>
                    电话：10086<br>
                    QQ:123456789<br>
                    E-mail:ddgffdsd@163.com<br><br><br>
                    网站合作<br>
                    JiangYun<br>
                    电话：10086<br>
                    QQ:123456789<br>
                    E-mail:ddgffdsd@163.com<br>
                </p>
				</div>
			</div>
		</div><!-- 主要内容展示 -->
	</div><!-- 主要内容结束 -->
	<div class="footer">
		<p>Copyright © 2016 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
	</div><!-- 底部版权信息结束 -->
</body>
</html>